<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Running Distance and Time Tracker</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        #status {
            margin: 20px;
            font-size: 24px;
        }
        button {
            padding: 10px 20px;
            font-size: 18px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div id="status">Press 'Start' to begin tracking.</div>
    <button id="startBtn">Start</button>
    <button id="stopBtn" disabled>Stop</button>

    <script>
        let startTime, endTime;
        let watchId;
        let distance = 0.0;
        let previousPosition = null;

        // Start tracking the user's position
        document.getElementById('startBtn').addEventListener('click', () => {
            if (navigator.geolocation) {
                startTime = new Date();
                distance = 0.0;
                previousPosition = null;
                watchId = navigator.geolocation.watchPosition(updatePosition, handleError, {
                    enableHighAccuracy: true,
                    timeout: 10000,
                    maximumAge: 0
                });
                document.getElementById('status').innerText = 'Tracking...';
                document.getElementById('startBtn').disabled = true;
                document.getElementById('stopBtn').disabled = false;
            } else {
                alert('Geolocation is not supported by this browser.');
            }
        });

        // Stop tracking the user's position
        document.getElementById('stopBtn').addEventListener('click', () => {
            if (navigator.geolocation) {
                navigator.geolocation.clearWatch(watchId);
                endTime = new Date();
                const timeElapsed = (endTime - startTime) / 1000 / 60; // Time in minutes
                document.getElementById('status').innerText = `Distance: ${distance.toFixed(2)} meters\nTime: ${timeElapsed.toFixed(2)} minutes`;
                document.getElementById('startBtn').disabled = false;
                document.getElementById('stopBtn').disabled = true;
            }
        });

        // Update the distance based on the new position
        function updatePosition(position) {
            if (previousPosition) {
                const delta = calculateDistance(previousPosition, position);
                distance += delta;
            }
            previousPosition = position;
        }

        // Calculate the distance between two positions using the Haversine formula
        function calculateDistance(pos1, pos2) {
            const R = 6371000; // Radius of the Earth in meters
            const lat1 = pos1.coords.latitude * Math.PI / 180;
            const lat2 = pos2.coords.latitude * Math.PI / 180;
            const deltaLat = (pos2.coords.latitude - pos1.coords.latitude) * Math.PI / 180;
            const deltaLon = (pos2.coords.longitude - pos1.coords.longitude) * Math.PI / 180;

            const a = Math.sin(deltaLat / 2) * Math.sin(deltaLat / 2) +
                      Math.cos(lat1) * Math.cos(lat2) *
                      Math.sin(deltaLon / 2) * Math.sin(deltaLon / 2);
            const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));

            return R * c; // Distance in meters
        }

        // Handle geolocation errors
        function handleError(error) {
            switch(error.code) {
                case error.PERMISSION_DENIED:
                    alert("User denied the request for Geolocation.");
                    break;
                case error.POSITION_UNAVAILABLE:
                    alert("Location information is unavailable.");
                    break;
                case error.TIMEOUT:
                    alert("The request to get user location timed out.");
                    break;
                case error.UNKNOWN_ERROR:
                    alert("An unknown error occurred.");
                    break;
            }
        }
    </script>
</body>
</html>
